<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../css/mui/mui.min.css" />
    <link rel="stylesheet" type="text/css" href="../css/mui/mui.picker.min.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
	<style>
        .text-light {
            color: #999 !important;
        }
        .aui-radio {
            width: 1rem;
            height: 1rem;
        }
	</style>
</head>
<body>
  <section class="aui-content aui-margin-t-15">
      <ul class="aui-list aui-form-list">

          <li class="aui-list-item">
              <div class="aui-list-item-inner">
                  <div class="aui-list-item-label">
                      上班时间
                  </div>
                  <div class="aui-list-item-input">
                      <input id="id_start_time" class="dtae-btn" data-options='{"type":"time"}' readonly="readonly" type="text" placeholder="选择时间">
                  </div>
              </div>
          </li>
          <li class="aui-list-item">
              <div class="aui-list-item-inner">
                  <div class="aui-list-item-label">
                      下班时间
                  </div>
                  <div class="aui-list-item-input">
                      <input id="id_end_time" class="dtae-btn"  data-options='{"type":"time"}' readonly="readonly" type="text" placeholder="选择时间">
                  </div>
              </div>
          </li>
      </ul>
  </section>
</body>
<script type="text/javascript" src="../script/zepto.min.js" ></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/mui/mui.min.js"></script>
<script type="text/javascript" src="../script/mui/mui.picker.min.js"></script>
<script type="text/javascript">
(function($) {
    $.init();
    var btns = $('.dtae-btn');
    btns.each(function(i, btn) {
      btn.addEventListener('tap', function() {
        var id = this.getAttribute('id');
        var _self = this;
        if(_self.picker) {
          _self.picker.show(function (rs) {
          btn.value = rs.text;
            _self.picker.dispose();
            _self.picker = null;
          });
        } else {
          var optionsJson = this.getAttribute('data-options') || '{}';
          var options = JSON.parse(optionsJson);
          var id = this.getAttribute('id');
          /*
           * 首次显示时实例化组件
           * 示例为了简洁，将 options 放在了按钮的 dom 上
           * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
           */
          _self.picker = new $.DtPicker(options);
          _self.picker.show(function(rs) {
            /*
             * rs.value 拼合后的 value
             * rs.text 拼合后的 text
             * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
             * rs.m 月，用法同年
             * rs.d 日，用法同年
             * rs.h 时，用法同年
             * rs.i 分（minutes 的第二个字母），用法同年
             */
             btn.value = rs.text;
            /*
             * 返回 false 可以阻止选择框的关闭
             * return false;
             */
            /*
             * 释放组件资源，释放后将将不能再操作组件
             * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
             * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
             * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
             */
            _self.picker.dispose();
            _self.picker = null;
          });
        }

      }, false);
    });
  })(mui);

  apiready = function(){
      api.parseTapmode();
      api.ajax({
          url: ServeUrl + 'm=Index&a=workTime',
          method: 'post',
          cache : false,
          timeout : 30,
          dataType : 'json',
      },function(ret, err){
          //alert(JSON.stringify(ret));
           $("#id_start_time").val(ret.start_work_time);
           $("#id_end_time").val(ret.end_work_time);
      });
  };

  function saveInfo(){
      var starttime = $("#id_start_time").val();
      var endtime = $("#id_end_time").val();
      api.ajax({
          url: ServeUrl + 'm=Index&a=setTime',
          method: 'post',
          cache : false,
              timeout : 30,
              dataType : 'json',
          data: {
              values: {
                  starttime : starttime,
                  endtime : endtime
              }
          }
      },function(ret, err){
          if (ret) {
              api.toast({
                  msg:ret.data.msg
              });
              //关闭指定window，若待关闭的window不在最上面，则无动画
              api.closeWin();
          }else{
              api.toast({
                  msg:'未知错误'
              });
          }

      });
  }
</script>
</html>
